import React from "react";
import "./Todo.css";
import TodoHeader from "../TodoHeader/TodoHeader";
import TodoMain from "../TodoMain/TodoMain";
import TodoFooter from "../TodoFooter/TodoFooter";
import { useState } from "react";
import { useEffect } from "react";
import { nanoid } from "nanoid";
import request from "../../../utils/request";
import axios from "axios";

export default function Todo() {
  //声明状态
  let [todos, setTodos] = useState([]);

  //声明一个函数, 新增任务的
  let addTodo = async (title) => {
    try {
      //发送请求 新增一个任务
      let result = await request.post("/todos", {
        title: title,
        done: false,
      });

      //更新状态
      setTodos([...todos, result.data]);
    } catch (e) {
      console.log('个性化错误处理~~');
    }
  };

  //声明一个函数 改变一个任务的『完成状态』
  let checkTodo = async (id, done) => {
    //发送请求更新某个任务的完成状态  put / patch
    await request.patch(`/todos/${id}`, {
      done: done,
    }); // {id: 1, title: 'xxx', done: true}

    //获取新的数组
    let newTodos = todos.map((item) => {
      if (item.id === id) {
        //修改完成状态
        item.done = done;
      }
      return item;
    });
    //更新状态
    setTodos(newTodos);
  };

  //声明函数 删除某个任务
  let removeTodo = async (id) => {
    //发送请求
    await request.delete(`/todos/${id}`);

    let newTodos = todos.filter((item) => item.id !== id);
    //更新
    setTodos(newTodos);
  };

  //声明函数 批量更新任务的完成状态
  let checkAllTodos = (done) => {
    let newTodos = todos.map((item) => {
      item.done = done;
      return item;
    });
    //更新状态
    setTodos(newTodos);
  };

  //声明函数 批量删除已完成任务
  let removeDoneTodos = () => {
    //过滤
    let newTodos = todos.filter((item) => !item.done);
    //更新状态
    setTodos(newTodos);
  };

  //组件挂载完毕  测试
  useEffect(() => {
    //测试新增任务
    // addTodo('考试');
    //测试修改完成状态
    // checkTodo(1, true);
    //测试移除某个任务
    // removeTodo(1);
    //测试批量更新
    // checkAllTodos(false);
    //测试移除已经完成的任务
    // removeDoneTodos()
  }, []);

  //组件挂载完毕
  useEffect(() => {
    let main = async () => {
      let result = await request.get("/todos");
      setTodos(result.data);
    };
    main();
  }, []);

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <TodoHeader addTodo={addTodo} />
        <TodoMain todos={todos} checkTodo={checkTodo} removeTodo={removeTodo} />
        <TodoFooter
          removeDoneTodos={removeDoneTodos}
          checkAllTodos={checkAllTodos}
          todos={todos}
        />
      </div>
    </div>
  );
}
